@extends('admin.layout.main')
@section('content')
    <link rel="stylesheet" href="{{asset('/css/bootstrap-switch.css')}}">
    <style type="text/css">
      .left-filter{margin-left:8px;}
      .people-num{float:left;margin-left:5px;color:#3c8dbc;}
    </style>
    <section class="content-header">
      <h1>
        公众平台用户
      </h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0)"><i class="fa fa-dashboard"></i> 公众号消息</a></li>
        <li class="active">公众平台用户</li>
      </ol>
    </section>
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-12 col-xs-6">
                <div class="box">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-sm-10">
                                <a href="javascript:void(0)" class="sync-user"><i class="fa fa-fw fa-spinner"></i>同步用户数据</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table class="table table-bordered table-hover" id="user-list">
                            <div class="people-num">总人数：{{$count}}</div>
                            <div class="dataTables_filter">
                                <form action="" method="GET">
                                    <button type="submit" class="btn btn-info btn-sm">查询:</button><input type="search" placeholder="请输入关键字" name="keywords" class="form-control input-sm" value="{{$keywords}}">
                                </form>
                            </div>
                            <thead>
                                <tr>
                                    <th style="width: 50px"><a style="cursor:pointer" class="all_check">全选</a></th>
                                    <th>昵称</th>
                                    <!-- <th>性别</th> -->
                                    <th>头像</th>
                                    <th>地址</th>
                                    <th>注册时间</th>
                                    <!-- <th>最后活跃时间</th> -->
                                    <th>操作</th>
                                    <th>查看</th>
                                </tr>
                            </thead>    
                            <tbody> 
                                @foreach($users as $user)
                                    <tr id="{{$user->id}}">
                                        <td><input type="checkbox" name="checkbox_member" class="checkbox_member" user-id="{{$user->id}}"></td>
                                        <td>{{$user->nickname}}</td>
                                        <!-- <td>@if($user->sex == 1) 男 @elseif($user->sex == 2) 女 @endif</td> -->
                                        <td>
                                            <img src="{{$user->headimgurl}}" width="20" height="20">
                                        </td>
                                        <td>{{$user->country}}{{$user->province}}{{$user->city}}</td>
                                        <td>{!! str_limit($user->created_at, 10, '') !!}</td>
<!--                                         <td>
                                            {!! calculateTime($user->updated_at) !!}
                                        </td> -->
                                        <td>
                                            <div class="switch switch-mini">
                                                <input name="status" type="checkbox" @if($user->status == 1) checked @endif/>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="/admin/wx_public_user/msg_log/{{$user->id}}">
                                                <i class="fa fa-fw fa-eye"></i>消息记录
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$users->links()}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- datepicker -->
    <script src="{{asset('/js/bootstrap-switch.min.js')}}"></script>
    <script type="text/javascript">
        $(function () {
            $('#user-list').DataTable({
              "paging": false,
              "lengthChange": false,
              "searching": false,
              "info": false,
              "autoWidth": true,
              "columns": [
                {"orderable": false},
                {"orderable": false},
                // {"orderable": true},
                {"orderable": true},
                {"orderable": true},
                // {"orderable": true},
                {"orderable": true},
                {"orderable": false},
                {"orderable": false}
              ]
            });
        });

        $('.all_check').click(function(){
            $('.checkbox_member').click();
        });

        $('[name="status"]').bootstrapSwitch({  
            onText: "激活",  
            offText: "停用",  
            onColor: "success",  
            offColor: "danger",  
            size: "mini",  
            onSwitchChange:function(event, state){ 
                var user_id = $(this).parents('tr').attr('id'),
                    status = 0;
                if (state == true) {
                    status = 1;
                }
                $.ajax({
                    url:"/admin/wx_public_user/toggle/"+user_id,
                    method:"GET",
                    data:{"status": status},
                    dataType:"json",
                    success:function (data) {
                        if (data.flag) {
                            console.log('---成功---');
                        } else {
                            console.log('---网络忙---');
                        }
                    }
                });
            }  
        });

        /* 同步用户数据 */
        $('.sync-user').click(function(){
            $.ajax({
                url:"/admin/wx_public_user/sync_user",
                method:"GET",
                data:{},
                dataType:"json",
                success:function (data) {
                    if (data.flag) {
                        bootbox.alert('用户数据同步完成!');
                    } else {
                        bootbox.alert('linux命令执行失败，请查看错误日志!');
                    }
                }
            });
        });

    </script>
@endsection      